@use 'sass:color';

// 变量
$primary-color: #3498db;
$secondary-color: #2ecc71;
$text-color: #333;
$font-family: 'Arial', sans-serif;

// 混合器
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin box-shadow($x: 0, $y: 2px, $blur: 5px, $color: rgba(0, 0, 0, 0.2)) {
  box-shadow: $x $y $blur $color;
}

// 基础样式
body {
  font-family: $font-family;
  color: $text-color;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

// 按钮样式示例
.sass-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  @include box-shadow();

  &.primary {
    background-color: $primary-color;
    color: white;

    &:hover {
      background-color: color.scale($primary-color, $lightness: -10%);
    }
  }

  &.secondary {
    background-color: $secondary-color;
    color: white;

    &:hover {
      background-color: color.scale($secondary-color, $lightness: -10%);
    }
  }
}
